import React, { Component } from "react";
import MainLayout from "../../../component/mainLayout/mainLayout";
import { Icon } from "antd-mobile";

import "./index.scss";

class WalletIndex extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	componentDidMount = () => {};
	render() {
		const _pageParams = {
			header: {
				title: "永辉钱包",
				goToApp: true
			},
			history: this.props.history
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div>
					<div className="wallet-index-container">
						<div className="circle"></div>
						<div className="banner"></div>
						<p className="main-title">账户资产</p>
						<section className="card">
							<div className="padding border">
								<p className="font-big">小辉付</p>
								<span className="font-green money">100,000.00</span>
							</div>
							<div className="card-wrapper one-line">
								<div>
									<p className="font-big">
										小辉付{" "}
										<span className="font-small">
											（年化
											<span className="font-red">4.3%</span>）
										</span>
									</p>
									<span className="font-green money">100,000.00</span>
								</div>
								<div>
									<p>余额</p>
									<span className="font-green money">100,000.00</span>
								</div>
							</div>
						</section>

						<section className="card flex">
							<div className="card-title">
								<p className="font-big">小辉付</p>
								<div>
									<span className="font-grey">最高授信额度（元） </span>
									<span className="font-green">30000</span>
								</div>
							</div>
							<Icon type="right" className="font-grey" />
						</section>
					</div>
				</div>
			</MainLayout>
		);
	}
}

export default WalletIndex;
